<template>
    <div>
        <el-dialog title="编辑出库单" :visible.sync="visible" :before-close="conmel" width="1200px">
            <div class="botcenten">
                <div>
                    <el-form label-position='right' ref="form" :model="form" :rules="rules" :inline="true"
                        class="demo-form-inline">
                        <el-form-item label="耗材出库主题:" label-width="200px" prop="outName">
                            <el-input placeholder="请输入耗材出库主题" v-model="form.outName"></el-input>
                        </el-form-item>
                        <el-form-item label="出库类型:" label-width="200px" prop="outSource">
                            <el-input disabled v-model="form.outSource"> </el-input>
                        </el-form-item>
                        <el-form-item label="出库仓库:" label-width="200px" prop="repositoryId">
                            <el-select class="select_disabled" disabled v-model="form.repositoryId"
                                placeholder="请选择出库仓库">
                                <el-option v-for="item in repositorylist" :key="item.id" :label="item.repositoryName"
                                    :value="item.id"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="出库备注:" label-width="200px">
                            <el-input placeholder="请输入出库备注" v-model="form.remark"></el-input>
                        </el-form-item>
                        <el-form-item label="领用人:" label-width="200px" prop="useId">
                            <el-select class="handle-select" v-model="form.useId" placeholder="请选择领用人">
                                <el-option v-for="item in userlist" :key="item.id" :label="item.userName"
                                    :value="item.id"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="领用时间:" label-width="200px" prop="useTime">
                            <el-date-picker v-model="form.useTime" type="date" placeholder="请选择日期">
                            </el-date-picker>
                        </el-form-item>
                    </el-form>
                </div>
                <el-divider></el-divider>
                <div>
                    <el-table :data="tableData" border class="table" ref="multipleTable"
                        header-cell-class-name="table-header">
                        <el-table-column type="selection" width="55" align="center"></el-table-column>
                        <el-table-column type="index" label="序号" width="60" align='center'>
                            <template slot-scope="scope">
                                {{ scope.$index + (query.pageNum - 1) * query.pageSize + 1 }}
                            </template>
                        </el-table-column>
                        <el-table-column prop="consumName" label="物品名称" align='center'></el-table-column>
                        <el-table-column prop="consumStandard" label="规格型号" align='center'></el-table-column>
                        <el-table-column prop="consumNum" label="数量" align='center'></el-table-column>
                        <el-table-column prop="consumUnit" label="计量单位" align='center'></el-table-column>
                        <el-table-column prop="consumPrice" label="单价" align='center'></el-table-column>
                        <el-table-column prop="repositoryName" label="仓库" align='center'></el-table-column>
                        <!-- <el-table-column prop="name" label="安全库存上限" align='center'></el-table-column>
                        <el-table-column prop="name" label="安全库存下限" align='center'></el-table-column> -->
                    </el-table>
                    <div class="pagination">
                        <el-pagination background layout="total, prev, pager, next" :current-page="query.pageNum"
                            :page-size="query.pageSize" :total="pageTotal"
                            @current-change="handlePageChange"></el-pagination>
                    </div>
                </div>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button @click="conmel">取 消</el-button>
                <el-button type="primary" @click="submit">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { formatTime } from '../../../../utils/util.js'
import { repository, userSelect, outdetail, outedit } from '../../../../api/index'
export default {
    name: "out-edit",
    props: {
        visible: {
            type: Boolean,
            required: true
        }
    },
    watch: {

    },
    components: {
    },
    data() {
        return {
            query: {
                outId: '',
                pageNum: 1,
                pageSize: 5,
            },
            pageTotal: 0,
            tableData: [],
            form: {

            },
            repositorylist: [],
            userlist: [],
            rules: {
                outName: [
                    { required: true, message: '耗材出库主题不能为空', trigger: 'blur' },
                ],
                useTime: [
                    { required: true, message: '领用时间不能为空', trigger: 'blur' },
                ],
                useId: [
                    { required: true, message: '领用人不能为空', trigger: 'blur' },
                ],
                repositoryId: [
                    { required: true, message: '出库仓库不能为空', trigger: 'blur' },
                ],
                outSource: [
                    { required: true, message: '出库类型不能为空', trigger: 'blur' },
                ],
            }

        }
    },
    mounted() {

    },
    methods: {
        open(e) {
            this.form = { ...e }
            this.repositorys()
            this.userSelects()
            this.outdetails(this.form.id)
        },
        //仓库
        async repositorys() {
            const data = await repository()
            this.repositorylist = data.data.data

        },
        async userSelects() {
            const data = await userSelect()
            this.userlist = data.data.data
        },
        async outdetails(e) {
            this.query.outId = e
            const data = await outdetail(this.query)
            this.tableData = data.data.data.records
            this.pageTotal = data.data.data.total
        },
        async submit() {
            this.$refs.form.validate(async (valid) => {
                if (valid) {
                    const user = this.userlist.filter(item => item.id == this.form.useId)
                    this.form.useName = user[0].userName
                    this.form.useTime = formatTime(this.form.useTime)
                    this.form.conSums = this.tableData.map((item) => {
                        return {
                            consumName: item.consumName,
                            consumStandard: item.consumStandard,
                            consumUnit: item.consumUnit,
                            consumNum: item.consumNum,
                            consumPrice: item.consumPrice
                        }

                    })

                    await outedit(this.form)
                    this.conmel()
                    this.$emit('refresh')

                } else {
                    return false;
                }
            });

        },
        conmel() {
            // 清空表单
            this.$refs.form.resetFields();
            this.query.pageNum = 1

            this.$emit('close')
        },
        handlePageChange(e) {
            this.query.pageNum = e
            this.outdetails()
        }
    }

}
</script>


<style lang="less" scoped>
::v-deep .el-input {
    width: 200px;
}

::v-deep .el-textarea {
    width: 500px;
}

// ::v-deep .select_disabled {

//     input {
//         background-color: #fff !important;
//     }
// }

.buttoncenter {
    margin-bottom: 10px;
    float: right;
}
</style>